<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>物品种类管理</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./source/plugins/bootstrap/3.3/bootstrap.min.css">
    <link rel="stylesheet" href="./source/plugins/datatable/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="./source/plugins/layer/skin/default/layer.css">
    <link rel="stylesheet" href="./source/plugins/datepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="./source/css/custom.css">
    <link rel="stylesheet" href="./source/css/default.css">
</head>
<body>
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10 col-xs-12 col-sm-12">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>物品种类管理</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row" style="margin-top: 20px">
                        <div class="col-md-12  col-xs-12 col-sm-12">
                            <div class="col-md-12  col-xs-12 col-sm-12">
                                <div class="text-left col-md-6  col-xs-6 col-sm-6">
                                    <button type="button" class="btn btn-primary"
                                            data-toggle="modal"
                                            data-target=".bs-type-add-modal-lg" style="padding: 6px 48px">
                                        追加
                                    </button>
                                </div>
                                <div class="text-right col-md-6  col-xs-6 col-sm-6">
                                    <a class="btn btn-primary" href="../index.php" >库存管理</a>
                                </div>
                                <table id="typeList"
                                       class="col-md-12 col-xs-12 col-sm-12 table table-striped table-bordered "></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-1"></div>
</div>


<div class="modal fade bs-type-add-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form-label-left" id="goods-type-regist-form" novalidate="">
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">类型名称
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id="type_name" name="type_name" class="form-control col-md-7 col-xs-12"
                                   required maxlength="200">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="addGoodsType()" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade bs-type-edit-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form-label-left" id="goods-type-edit-form" novalidate="">
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">类型名称
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id="edit_name" name="type_name" class="form-control col-md-7 col-xs-12"
                                   required maxlength="200">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                        <input type="hidden" id="edit_type" name="type" >
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="updateGoodsType()" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<script src="./source/plugins/jquery/js/jquery-1.10.2.min.js"></script>
<script src="./source/plugins/jquery/js/jquery.validate.min.js"></script>
<script src="./source/plugins/jquery/js/messages_jp.js"></script>
<script src="./source/plugins/bootstrap/3.3/bootstrap.min.js"></script>
<script src="./source/plugins/datatable/js/jquery.dataTables.min.js"></script>
<script src="./source/plugins/datatable/js/dataTables.bootstrap.min.js"></script>
<script src="./source/plugins/datepicker/bootstrap-datetimepicker.js"></script>
<script src="./source/plugins/layer/layer.js"></script>
<script src="./source/js/index.js"></script>
<script>
  var typeList = null;
  $(function () {
    refreshTypeList();
  })

  function updateGoodsType() {
    if (!validate("goods-type-edit-form")) {
      return false;
    }
    var form = $("#goods-type-edit-form").serialize();
    comAjax("./api/update-goods-type-api.php", function (result) {
      $("#edit_name").val("");
      var data = result.data;
      if (!data.result) {
        layer.msg('失败!', {icon: 5});
      }
      else {
        $(".bs-type-edit-modal-lg").modal("hide");
        if (!isEmpty(typeList)) {
          refreshTypeList();
        }
      }
    }, form);
  }

  function addGoodsType() {
    if (!validate("goods-type-regist-form")) {
      return false;
    }
    var form = $("#goods-type-regist-form").serialize();
    comAjax("./api/add-goods-type-api.php", function (result) {
      $("#type_name").val("");
      var data = result.data;
      if (!data.result) {
        layer.msg('失败!', {icon: 5});
      }
      else {
        $(".bs-type-add-modal-lg").modal("hide");
        if (!isEmpty(typeList)) {
          refreshTypeList();
        }
      }
    }, form);
  }

  function refreshTypeList() {
    if (isEmpty(typeList)) {
      initTypeTable();
      $("#typeList_length").addClass("col-md-6");
      $("#typeList_paginate").addClass("col-md-6");
    }
    else {
      typeList.ajax.reload();
    }
  }

  function initTypeTable() {
    typeList = $('#typeList').DataTable({
      dom: '<"top">rt<"bottom"lp><"clear">',
      autoWidth: false,
      scrollCollapse: false,
      paginate: true,
      info: false,
      filter: true,
      ordering: false,
      order: [[0, 'desc']],
      serverSide: false,
      pageLength: 10,
      ajax: {
        url: "api/get_type_info_api.php"
      },
      columns: [{
        width: '10%',
        title: "类型",
        data: "type"
      }, {
        width: '10%',
        title: "名字",
        data: "type_name"
      }, {
        width: '10%',
        title: "操作",
        data: "",
        render: function (data, type, full, meta) {
          var html =
              '<div class="col-md-12 col-xs-12 col-sm-12" >' +
              '<div class="col-md-6 col-xs-12 col-sm-12 text-center"><input type="button" class=" btn btn-primary customer-edit" data-type="' + full.type + '" data-name="' + full.type_name + '" data-toggle="modal" data-target=".bs-type-edit-modal-lg"  onclick="actions(this)" value="編集"></input></div>' +
              '<div class="col-md-6 col-xs-12 col-sm-12 text-center"><input type="button" class="btn btn-warning  customer-delete"  data-type="' + full.type + '" data-row="' + meta.row + '" onclick="actions(this)" value="削除"/></div>' +
              '</div> ';
          return html;
        }
      }], rowCallback: function (row, data, index) {

      }, drawCallback: function (settings) {

      }, initComplete: function (settings, json) {

      }
    });
  }

  function actions(element) {
    if ($(element).hasClass("customer-delete")) {

      layer.confirm('确定删除？', {
        btn: ['确定','取消']
      }, function(){
        var type = $(element).attr("data-type");
        comAjax("./api/delete_type.php", function (result) {
          refreshTypeList();
          closeLayerDialog();
        }, "type=" + type);
      }, function(){
//
      });
    }
    else if ($(element).hasClass("customer-edit")) {

      var data = $(element).data();
      $("#edit_name").val(data.name);
      $("#edit_type").val(data.type);
    }
  }
</script>
</body>
</html>